
<%var csstpl = {%>
    <link href="${basepath}/vendor/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="${basepath}/vendor/js/plugins/fancybox/jquery.fancybox.css" />
    <style>
    	
    	.page_action { text-align:right;margin-top:20px }
    	.page_action .span8 { margin:-20px 0; }
    	.page_action .dataTables_info { padding:20px 0; float:left; }
    	.page_action .dataTables_paginate { padding:0; height:30px !important; }
    	.ibox-content { padding:15px; }
    	.btn_reload { color:#fff !important; }
    	table { margin:-10px 0 0 !important; }
    	.table>thead>tr>th { border-top:none; }
    	
    	.search_panel { position:relative; margin-bottom:20px; padding:15px; background:#fff; border: 1px solid #e7eaec; border-radius:3px; }
    	.search_panel .part1 label  { position:relative; display:block; width:300px; margin:10px 0; padding:6px; }
    	.search_panel .part1 input  { position:absolute; left:100px; top:0px; width:150px; padding:6px; font:13px/15px "微软雅黑"; border:1px solid #ddd; border-radius:3px; }
    	.search_panel .part1 select { position:absolute; left:100px; top:0px; width:150px; padding:5px; font:12px/15px "微软雅黑"; border:1px solid #ddd; border-radius:3px; }
    	.search_panel .btns { padding:10px 0 0 100px; }
    	.search_panel .btns .btn.color { font:13px/20px "微软雅黑"; margin-right:5px; padding:3px 20px; background:#1AB394; color:#fff; border:1px solid #1AB394; }
    	.search_panel .btns .btn.line  { font:13px/20px "微软雅黑"; margin-right:5px; padding:3px 20px; background:#ffffff; color:#333; border:1px solid #ddd; }
    	
    	.input-group select { width:150px; padding:5px; font:12px/15px "微软雅黑"; border:1px solid #ddd; border-radius:3px; }
    	
    	.ibox-tools input {position:relative;bottom:5px; width:150px; padding:6px; font:13px/15px "微软雅黑"; border:1px solid #ddd; border-radius:3px; }
    	.ibox-tools select {position:relative;bottom:5px; width:150px; padding:5px; font:12px/15px "微软雅黑"; border:1px solid #ddd; border-radius:3px; }
    	.ibox-tools div {position:relative;bottom:5px;}
    	.ibox-tools span {position:relative;bottom:5px;}
    	.ibox-tools span input {bottom:0px;}
    	.ibox-tools a {position:relative;bottom:5px;}
    	
    	.empty { height:400px; background:url("${basepath}/vendor/img/list_empty.png") no-repeat center; }
    	
    </style>
<%};%>
<%var jstpl = {%>
    <script src="${basepath}/weixin/plugin/clipboard.js"></script>
    <script src="${basepath}/vendor/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script>
    	//日期格式化
    	var df = Vue.filter('dataFormat');
    	var now = new Date();
    	var yesterday = df(new Date(now-24*3600*1000),'yyyy-MM-dd');//昨天
    	var last_month = new Date();//上个月
    	last_month = new Date(last_month.setMonth(last_month.getMonth()-1));
    	last_month = df(last_month,'yyyy-MM');
    	var list = new Vue({
    		el: "#vue_elem",
    		data: {
    			list: "",
    			totalPage:1,
    			totalRow:0,
    			select_date:"",
    			now:new Date(),
    			begin:df(now,'yyyy-MM-dd'),
    			end:df(now,'yyyy-MM-dd')
    			
    		},
    		created:function(){
    			Vue.nextTick(function(){
					list.submit();
				})
    		},
    		methods: {
    			submit: function(){
    				var vue = this;
        			gx.postdata("/shangjia/product/data/view_data",$("form").serialize(),function(data){
        	            vue.list=data.list;
        	            vue.totalRow=data.totalRow;
        	            vue.totalPage = data.totalPage,
        	            vue.topage(data.totalPage,1);
        	            vue.now = new Date();
        			})
    			},
    			topage: function(pages,curr){
    				laypage({
    				    cont: 'laypage',    skin: 'molv',
    				    skip: true,    curr: curr,
    				    pages: pages,
    					jump: function(e, first){
    				    	if(!first){
								$("#pageNumber").val(e.curr);
								gx.postdata("/shangjia/product/data/view_data",$("form").serialize(),function(data){
				                    //console.info(data);
				                    list.list=data.list;
				                    list.topage(data.totalPage,e.curr);
				            	})
    				        }
    				    }
    				});
    			}
    		},
    		watch: {
    			select_date(val,oldval){
    				switch (val){
    					case "7":
    						this.begin = df(new Date(this.now-7*24*3600*1000),'yyyy-MM-dd');
    						this.end = yesterday;
    						break;
    					case "30":
    						this.begin = df(new Date(this.now-30*24*3600*1000),'yyyy-MM-dd');
    						this.end = yesterday;
    						break;
    					case "day":
    						this.begin = yesterday;
    						this.end = this.begin;
    						break;
    					case "month":
    						this.begin = last_month;
    						this.end = null;
    						break;
    					case "diy":
    						this.begin = yesterday;
    						this.end = this.begin;
    						break;
    					default:
    						this.begin = df(this.now,'yyyy-MM-dd');
    						this.end = df(this.now,'yyyy-MM-dd');
    				}
    				Vue.nextTick(function(){
    					list.submit();
    				})
    			}
    		}
    	})
    	var begin1={elem:"#begin1",
			format:"YYYY-MM-DD",
			max:yesterday,
			istime:false,istoday:false,
			choose:function(datas){
				list.begin = datas ;
				list.end = datas;
				Vue.nextTick(function(){
					list.submit();
				})
			}}
			laydate(begin1);
		var begin2={elem:"#begin2",
			format:"YYYY-MM",
			max:last_month,
			isdate:false,istoday:false,
			choose:function(datas){
				list.begin = datas;
				list.end = datas;
				Vue.nextTick(function(){
					list.submit();
				})
			}};
		laydate(begin2);
		var begin3={elem:"#begin3",
			format:"YYYY-MM-DD",
			max:yesterday,
			istime:false,istoday:false,
			choose:function(datas)
			{
				end1.min = datas;
				list.begin = datas;
				Vue.nextTick(function(){
					list.submit();
				})
			}};
		laydate(begin3);
		var end1={elem:"#end1",
			format:"YYYY-MM-DD",
			max:yesterday,
			istime:false,istoday:false,
			choose:function(datas)
			{
				begin3.max = datas;
				list.end = datas;
				Vue.nextTick(function(){
					list.submit();
				})
			}};
		laydate(end1);
    	/* $(document).ready(function(){
    		var start={elem:"#begin",
    				format:"YYYY-MM-DD hh:mm:ss",
    				max:"2099-06-16 23:59:59",
    				istime:true,istoday:false,
    				choose:function(datas)
    				{}};
    		laydate(start);
    	}); */
    	
    </script>
<%};%>
<%layout("../layout/_layout.html",{title:'商品列表数据',jstpl:jstpl,csstpl:csstpl}){ %>
    <div id="vue_elem" class="wrapper wrapper-content animated fadeInUp">
    <form> 
    
    	<!-- 搜索面板 -->
    	<!-- <div class="search_panel">
    		<div class="part1">
    		  <label>商品名称:<input type="text" value="${p.product_name!}" name="product_name" /></label>
    		  <label>日期时间:<input  id="query_date" type="text" value="${p.sum_date!}" name="p.sum_date" /></label>
    		</div>
    		<div class="btns">
    		  <button type="submit" class="btn color btn-primary"> 搜索</button>
    		</div>
    		 </form> 
    	</div> -->
        <div class="row">
            <div class="col-sm-12">
            <div class="ibox">
	            <div class="ibox-title">
	                <h5>商品概况</h5>
	            </div>
	            <div class="ibox-content">
	            	<div class="row">
					    <div class="col-xs-3">
	                        <small class="stats-label">在架商品数</small>
	                        <h2>${product_num!0}</h2>
	                    </div>
	                </div>
				</div>
				<div class="ibox-content">
	            	<div class="row">
					    <!-- <div class="col-xs-3">
	                        <small class="stats-label">被访问商品数</small>
	                        <h2>236 321.80</h2>
	                    </div> -->
	                    <div class="col-xs-3">
	                        <small class="stats-label">商品访问数（商品UV）</small>
	                        <h2>${sum.product_uv!0}</h2>
	                    </div>
	                    <div class="col-xs-3">
	                        <small class="stats-label">商品浏览量（商品PV）</small>
	                        <h2>${sum.product_pv!0}</h2>
	                    </div>
	                </div>
				</div>
				<div class="ibox-content">
	            	<div class="row">
	                    <div class="col-xs-3">
	                        <small class="stats-label">付款商品数</small>
	                        <h2>${sum.pay_count!0}</h2>
	                    </div>
	                    <!-- <div class="col-xs-3">
	                        <small class="stats-label">商品访问付款转化率</small>
	                        <h2>236 321.80</h2>
	                    </div> -->
	                </div>
				</div>
			</div>
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>商品数据统计</h5>
                        <div class="ibox-tools" >
                        	<input type="text" value="${p.product_name!}" name="product_name" placeholder="商品搜索" @keyup.enter="submit()" onkeypress="if(event.keyCode == 13) return false;"/>
                            <select class="select_date" v-model="select_date">
                            	<option value="">今日实时</option>
                            	<option value="7">最近7天</option>
                            	<option value="30">最近30天</option>
                            	<option value="day">自然天</option>
                            	<option value="month">自然月</option>
                            	<option value="diy">自定义</option>
                            </select>
                            <!-- <input type="text" value="${p.product_name!}"  /> -->
                            <span v-show="select_date=='7'">{{begin}} 至 {{end}}</span>
                            <span v-show="select_date=='30'">{{begin}} 至 {{end}}</span>
                            <span v-show="select_date=='day'"><input type="text" id="begin1" :value="begin" autocomplete="off" ></span>
                            <span v-show="select_date=='month'"><input type="text" id=begin2 :value="begin" autocomplete="off" ></span>
                            <span v-show="select_date=='diy'"><input id="begin3" type="text" :value="begin" autocomplete="off" ><input id="end1" type="text" :value="end" autocomplete="off" ></span>
                            <span v-show="select_date==''">{{now | dataFormat('yyyy-MM-dd hh:mm:ss')}}</span>
                            <input type="hidden" name="begin_time" :value="begin" ><input type="hidden" name="end_time" :value="end" >
                            <a href="javascript:;" class="btn btn-warning btn-xs btn_reload" @click="submit()"><i class="fa fa-refresh"></i> 刷新</a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="project-list">
                            <table class="table table-bordered" style="margin-top:25px;">
								<tbody id="type">
									<thead>
	                                     <tr>
	                                     <th>商品名称</th>
	                                     <th>PV</th>
	                                     <th>UV</th>
	                                     <th>支付订单</th> 
	                                     </tr>
	                                </thead>
	                                <tr v-for="product in list">
	                                    <td>{{product.product_id}}{{ product.product_name }}</td>
	                                    <td>{{ product.pv_data || 0 }}</td>
										<td>{{ product.uv_data || 0 }}</td>
										<td>{{ product.pay_order || 0 }}</td>	
									</tr>
								</tbody>
							</table>
						</div>
                            <div class="page_action">
		                        <div id="laypage"></div>
								<input type="hidden" name="pageNumber" id="pageNumber"  value="1">
								<input type="hidden" name="pageSize" id="pageSize" value="10">
                        	</div>
                        </div>
                    </div>
                </div>
            </div>
        
        </form>
        </div>
<%}%>